<template>
  <div class="bg-white px-3">
    <el-tabs v-model="tabIndex" @tab-click="handleClick">
      <el-tab-pane label="基础设置">
        <createBase></createBase>
      </el-tab-pane>
      <el-tab-pane label="商品规格">
        <!-- 规格选项 -->
        <el-form ref="form" label-width="80px">
          <el-form-item label="商品规格">
            <el-radio-group :value="skus_type" @input="vModel('skus_type',$event)" size="medium">
              <el-radio-button :label="0">
                单规格</el-radio-button>
              <el-radio-button :label="1">
                多规格</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <!-- 单规格 -->
          <template v-if="skus_type === 0">
            <el-form ref="form" label-width="80px">
              <el-form-item label="市场价格">
                <el-input type="number" :value="oprice" @input="vModel('oprice',$event)" class="w-25">
                  <template slot="append">元</template>
                </el-input>
              </el-form-item>
              <el-form-item label="销售价格">
                <el-input type="number" :value="pprice" @input="vModel('pprice',$event)" class="w-25">
                  <template slot="append">元</template>
                </el-input>
              </el-form-item>
              <el-form-item label="成本价格">
                <el-input type="number" :value="cprice" @input="vModel('cprice',$event)" class="w-25">
                  <template slot="append">元</template>
                </el-input>
              </el-form-item>
              <el-form-item label="商品重量">
                <el-input type="number" :value="weight" @input="vModel('weight',$event)" class="w-25">
                  <template slot="append">公斤</template>
                </el-input>
              </el-form-item>
              <el-form-item label="商品体积">
                <el-input type="number" :value="volume" @input="vModel('volume',$event)" class="w-25">
                  <template slot="append">立方米</template>
                </el-input>
              </el-form-item>
            </el-form>
          </template>
          <template v-if="skus_type === 1">
            <el-form ref="form" label-width="80px">
              <el-form-item label="添加规格">
                <div class="card mb-3 border" style="line-height: 1.2;">
                  <div class="card-header d-flex align-items-center">
                    规格项：
                    <el-input size="mini" style="width: 200px;" :value="name" @input="vModel('name',$event)">
                      <el-button slot="append" icon="el-icon-more"></el-button>
                    </el-input>
                    <el-radio-group size="mini" :value="type" @input="vModel('type',$event)" class="ml-2">
                      <el-radio :label="0">无</el-radio>
                      <el-radio :label="1">颜色</el-radio>
                      <el-radio :label="2">图片</el-radio>
                    </el-radio-group>
                    <!-- 上移 -->
                    <el-button size="mini" class="ml-auto" icon="el-icon-top"></el-button>
                    <!-- 下移 -->
                    <el-button size="mini" icon="el-icon-bottom"></el-button>
                    <!-- 删除 -->
                    <el-button size="mini" type="text">删除</el-button>
                  </div>
                  <div class="card-body">
                    <div class="mt-2">
                      <el-button type="text" size="mini" icon="el-icon-plus">
                        增加规格值
                      </el-button>
                    </div>
                  </div>
                </div>
              </el-form-item>
            </el-form>
          </template>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="商品属性"></el-tab-pane>
      <el-tab-pane label="媒体设置"></el-tab-pane>
      <el-tab-pane label="商品详情"></el-tab-pane>
      <el-tab-pane label="折扣设置"></el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import createBase from "@/components/shop/create-base";
export default {
  components: {
    createBase
  },
  data() {
    return {
      tabIndex: 0,
      // 基础设置
      options: [
        {
          value: "zhinan",
          label: "指南",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              children: [
                {
                  value: "yizhi",
                  label: "一致"
                },
                {
                  value: "fankui",
                  label: "反馈"
                },
                {
                  value: "xiaolv",
                  label: "效率"
                },
                {
                  value: "kekong",
                  label: "可控"
                }
              ]
            },
            {
              value: "daohang",
              label: "导航",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航"
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航"
                }
              ]
            }
          ]
        },
        {
          value: "zujian",
          label: "组件",
          children: [
            {
              value: "basic",
              label: "Basic",
              children: [
                {
                  value: "layout",
                  label: "Layout 布局"
                },
                {
                  value: "color",
                  label: "Color 色彩"
                },
                {
                  value: "typography",
                  label: "Typography 字体"
                },
                {
                  value: "icon",
                  label: "Icon 图标"
                },
                {
                  value: "button",
                  label: "Button 按钮"
                }
              ]
            },
            {
              value: "form",
              label: "Form",
              children: [
                {
                  value: "radio",
                  label: "Radio 单选框"
                },
                {
                  value: "checkbox",
                  label: "Checkbox 多选框"
                },
                {
                  value: "input",
                  label: "Input 输入框"
                },
                {
                  value: "input-number",
                  label: "InputNumber 计数器"
                },
                {
                  value: "select",
                  label: "Select 选择器"
                },
                {
                  value: "cascader",
                  label: "Cascader 级联选择器"
                },
                {
                  value: "switch",
                  label: "Switch 开关"
                },
                {
                  value: "slider",
                  label: "Slider 滑块"
                },
                {
                  value: "time-picker",
                  label: "TimePicker 时间选择器"
                },
                {
                  value: "date-picker",
                  label: "DatePicker 日期选择器"
                },
                {
                  value: "datetime-picker",
                  label: "DateTimePicker 日期时间选择器"
                },
                {
                  value: "upload",
                  label: "Upload 上传"
                },
                {
                  value: "rate",
                  label: "Rate 评分"
                },
                {
                  value: "form",
                  label: "Form 表单"
                }
              ]
            },
            {
              value: "data",
              label: "Data",
              children: [
                {
                  value: "table",
                  label: "Table 表格"
                },
                {
                  value: "tag",
                  label: "Tag 标签"
                },
                {
                  value: "progress",
                  label: "Progress 进度条"
                },
                {
                  value: "tree",
                  label: "Tree 树形控件"
                },
                {
                  value: "pagination",
                  label: "Pagination 分页"
                },
                {
                  value: "badge",
                  label: "Badge 标记"
                }
              ]
            },
            {
              value: "notice",
              label: "Notice",
              children: [
                {
                  value: "alert",
                  label: "Alert 警告"
                },
                {
                  value: "loading",
                  label: "Loading 加载"
                },
                {
                  value: "message",
                  label: "Message 消息提示"
                },
                {
                  value: "message-box",
                  label: "MessageBox 弹框"
                },
                {
                  value: "notification",
                  label: "Notification 通知"
                }
              ]
            },
            {
              value: "navigation",
              label: "Navigation",
              children: [
                {
                  value: "menu",
                  label: "NavMenu 导航菜单"
                },
                {
                  value: "tabs",
                  label: "Tabs 标签页"
                },
                {
                  value: "breadcrumb",
                  label: "Breadcrumb 面包屑"
                },
                {
                  value: "dropdown",
                  label: "Dropdown 下拉菜单"
                },
                {
                  value: "steps",
                  label: "Steps 步骤条"
                }
              ]
            },
            {
              value: "others",
              label: "Others",
              children: [
                {
                  value: "dialog",
                  label: "Dialog 对话框"
                },
                {
                  value: "tooltip",
                  label: "Tooltip 文字提示"
                },
                {
                  value: "popover",
                  label: "Popover 弹出框"
                },
                {
                  value: "card",
                  label: "Card 卡片"
                },
                {
                  value: "carousel",
                  label: "Carousel 走马灯"
                },
                {
                  value: "collapse",
                  label: "Collapse 折叠面板"
                }
              ]
            }
          ]
        },
        {
          value: "ziyuan",
          label: "资源",
          children: [
            {
              value: "axure",
              label: "Axure Components"
            },
            {
              value: "sketch",
              label: "Sketch Templates"
            },
            {
              value: "jiaohu",
              label: "组件交互文档"
            }
          ]
        }
      ]
    };
  },
  computed: {
    ...mapState({
      // 商品规格
      skus_type: state => state.create_goods.skus_type, //0为统一规格,1为多规格
      oprice: state => state.create_goods.oprice, // 市场价格
      pprice: state => state.create_goods.pprice, // 销售价格
      cprice: state => state.create_goods.cprice, // 成本价格
      weight: state => state.create_goods.weight, // 重量
      volume: state => state.create_goods.volume, // 体积

      // 多规格卡片
      name: state => state.create_goods.name, // 多规格卡片名称
      type: state => state.create_goods.type // 多规格卡片是什么类型 无,颜色,图片,
    })
  },
  methods: {
    ...mapMutations(["vModelState"]),
    // 修改表单的值
    vModel(key, value) {
      this.vModelState({ key, value });
    },
    // 加载事件
    handleClick(tab, event) {
      this.tabIndex = tab.index;
    }
  }
};
</script>